<template>
  <div class="home-container">
    <a-card title="tds-ec-web 子应用" :bordered="false">
      <template #extra>
        <a-tag color="blue">Vue3 + Vite + Ant Design Vue</a-tag>
      </template>
      
      <a-row :gutter="16">
        <a-col :span="12">
          <a-statistic
            title="访问次数"
            :value="appStore.visitCount"
            :value-style="{ color: '#3f8600' }"
          >
            <template #suffix>
              <a-icon type="arrow-up" />
            </template>
          </a-statistic>
        </a-col>
        <a-col :span="12">
          <a-statistic
            title="运行状态"
            :value="appStore.isQiankun ? '微应用模式' : '独立运行'"
            :value-style="{ color: appStore.isQiankun ? '#1890ff' : '#52c41a' }"
          />
        </a-col>
      </a-row>
      
      <a-divider />
      
      <a-space direction="vertical" style="width: 100%">
        <a-alert
          message="子应用信息"
          description="这是一个基于 Vue3 + Vite + Ant Design Vue 的 qiankun 微应用"
          type="info"
          show-icon
        />
        
        <a-button type="primary" @click="incrementCount" :loading="appStore.loading">
          <template #icon>
            <PlusOutlined />
          </template>
          增加访问次数
        </a-button>
        
        <a-button @click="showMessage">
          <template #icon>
            <MessageOutlined />
          </template>
          显示消息
        </a-button>
        
        <a-button @click="resetCount">
          <template #icon>
            <ReloadOutlined />
          </template>
          重置计数
        </a-button>
      </a-space>
      
      <a-divider />
      
      <a-descriptions title="应用状态" bordered size="small">
        <a-descriptions-item label="应用名称">{{ appStore.appName }}</a-descriptions-item>
        <a-descriptions-item label="版本">{{ appStore.version }}</a-descriptions-item>
        <a-descriptions-item label="运行模式">
          <a-tag :color="appStore.isQiankun ? 'blue' : 'green'">
            {{ appStore.isQiankun ? '微应用' : '独立应用' }}
          </a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="加载状态">
          <a-badge :status="appStore.loading ? 'processing' : 'success'" />
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
  </div>
</template>

<script setup>
import { useAppStore } from '@/stores/app'
import { message } from 'ant-design-vue'

const appStore = useAppStore()

// 方法
const incrementCount = async () => {
  appStore.setLoading(true)
  
  // 模拟异步操作
  setTimeout(() => {
    appStore.incrementVisitCount()
    appStore.setLoading(false)
    message.success('访问次数已增加')
  }, 500)
}

const showMessage = () => {
  message.info('这是来自子应用的消息')
}

const resetCount = () => {
  appStore.resetState()
  message.success('计数已重置')
}
</script>

<style lang="scss" scoped>
.home-container {
  padding: 24px;
  
  .ant-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}
</style> 